<script lang="ts" setup>
import { ref } from 'vue'

import { useVbenModal } from '@vben/common-ui'

import { Button, Divider, message, Space } from 'ant-design-vue'

import { useVbenForm } from '#/adapter/form'
import { warehouseEdit, warehouseInfo } from '#/api/warehouse'

const emit = defineEmits(['refresh'])

const inputDisabled = ref(true)

const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    componentProps: {
      class: 'w-4/5',
    },
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'CustomRender',
      fieldName: '_divider',
      formItemClass: 'col-span-4',
      hideLabel: true,
    },

    {
      component: 'Input',
      fieldName: 'warehouse_code',
      label: '仓库编号',
      componentProps: {
        disabled: true,
        placeholder: '仓库编号',
      },
    },
    {
      component: 'Input',
      fieldName: 'warehouse_name',
      label: '仓库名称',
      componentProps: {
        placeholder: '仓库名称',
      },
    },
    {
      component: 'Input',
      fieldName: 'manage_department',
      label: '管理部门',
      componentProps: {
        placeholder: '管理部门',
      },
    },

    {
      component: 'Select',
      fieldName: 'type',
      label: '类型',
      operator: '=',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '物料',
            value: '物料',
          },
          {
            label: '成品',
            value: '成品',
          },
        ],
        placeholder: '请选择',
      },
    },

    {
      component: 'Input',
      fieldName: 'area',
      label: '区域',
      componentProps: {
        placeholder: '区域',
      },
    },
    {
      component: 'Textarea',
      fieldName: 'remark',
      label: '备注',
      formItemClass: 'col-span-3',
      componentProps: {
        disabled: inputDisabled,
        placeholder: '请输入备注',
      },
    },
    {
      component: 'Switch',
      fieldName: 'is_allow_negative',
      label: '允许负库存',
      componentProps: {
        disabled: inputDisabled,
        class: 'w-[50px]',
        checkedValue: 1,
        unCheckedValue: 0,
      },
    },
    {
      component: 'Switch',
      fieldName: 'is_material_warehouse',
      label: '默认物料仓',
      componentProps: {
        disabled: inputDisabled,
        class: 'w-[50px]',
        checkedValue: 1,
        unCheckedValue: 0,
      },
    },
    {
      component: 'Switch',
      fieldName: 'is_product_warehouse',
      label: '默认成品仓',
      componentProps: {
        disabled: inputDisabled,
        class: 'w-[50px]',
        checkedValue: 1,
        unCheckedValue: 0,
      },
    },
    {
      component: 'Switch',
      fieldName: 'is_stop',
      label: '停用',
      componentProps: {
        disabled: inputDisabled,
        class: 'w-[50px]',
        checkedValue: 1,
        unCheckedValue: 0,
      },
    },
  ],
  wrapperClass: 'grid-cols-4',
})
const rowid = ref(0)
const [Modal, modalApi] = useVbenModal({
  destroyOnClose: true,
  class: 'w-[95%] h-[100%]',
  appendToMain: true,
  fullscreenButton: false,
  onCancel() {
    modalApi.close()
    emit('refresh')
  },
  onConfirm: async () => {
    await baseFormApi.validateAndSubmitForm()
  },
  onOpenChange: async (isOpen: boolean) => {
    if (isOpen) {
      const { rowData, view } = modalApi.getData<Record<string, any>>()
      inputDisabled.value = false
      if (view === 'edit') {
        await initData(rowData.id)
      }
    }
  },
})

async function initData(id: any) {
  warehouseInfo({ id }).then((response) => {
    baseFormApi.setValues(response.row, false)
  })
}

// 保存
async function save() {
  const values = await baseFormApi.getValues()
  const parmas = {
    ...values,
  }

  warehouseEdit(parmas).then((res: any) => {
    if (res.data.code === 1) {
      message.success(res.data.msg)
      modalApi.close()
      emit('refresh')
    } else {
      message.error(res.data.msg)
    }
  })
}
</script>

<template>
  <Modal title="编辑">
    <BaseForm>
      <template #_divider>
        <Divider orientation="left">基础信息</Divider>
      </template>
    </BaseForm>
    <template #footer>
      <div class="flex justify-end">
        <Space>
          <Button @click="modalApi.close()">取消</Button>
          <Button v-if="!inputDisabled" type="primary" @click="save()"> 保存 </Button>
        </Space>
      </div>
    </template>
  </Modal>
</template>

<style scoped>
.fina-box {
  padding: 10px 0;
}
.fina-btn {
  margin-bottom: 16px;
}
</style>
